<template>
	<view class="drop-down">
		<view class="switch-box">
			<view class="switch-bar" @click="toogleBar()">
				<view class="label">{{screenListStr}}</view>
				<image src="../static/images/data-black-down.png" mode="aspectFit" class="down"
				:class="{'switch-down-rotate': showSwitch, 'switch-down-rotate-reverse': !showSwitch}">
				</image>
			</view>
			<view class="menu" v-if="showSwitch" :class="{'menu-down': showSwitch}">
				<view class="item" v-for="(item, index) in screenList" :key="index" @click="switchBarSelected(item)">
					{{item.label}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"custom-drop-down",
		data() {
			return {
				showSwitch: false,
				screenListStr: '',
			};
		},
		props: {
			screenList: {
				type: Array,
				default: []
			}
		},
		mounted() {
			if(this.screenList.length > 0) {
				this.screenListStr = this.screenList[0].label;
			}
			uni.$on('closeDropDown', () => {
				this.showSwitch = false;
			});
		},
		methods: {
			switchBarSelected(item) {
				this.screenListStr = item.label;
				this.showSwitch = false;
			},
			toogleBar() {
				this.showSwitch = !this.showSwitch;
				uni.$emit('closeScoreDropDown');
			},
		}
	}
</script>

<style scoped lang="scss">
	.drop-down{
		width: 100%;
	    .switch-box{
	    	width: 100%;
	    	background: rgba(255, 255, 255, 0.6);
	    	position: relative;
	    	border-radius: 16upx;
	    	.switch-bar{
	    		width: 100%;
	    		display: flex;
	    		height: 66upx;
	    		align-items: center;
				justify-content: space-between;
	    		padding: 0 16upx;
	    		overflow: hidden;
				box-sizing: border-box;
	    		.label{
	    			width: calc(100% - 52px);
	    			margin: 0 16upx;
	    			color: $gray-color;
	    			font-size: 26upx;
	    			white-space: nowrap;       
	    		    overflow: hidden;    
	    		    text-overflow: ellipsis; 
	    		}
	    		.down{
	    			width: 40upx;
	    			height: 40upx;
	    		}
	    		.switch-down-rotate{
	    			transform: rotate(180deg); /* 将图片旋转180度 */
	    			transition: transform 0.5s ease;
	    		}
	    		.switch-down-rotate-reverse{
	    			transform: rotate(0deg);
	    			transition: transform 0.5s ease; /* 添加过渡动画效果，持续0.5秒，缓和动画效果 */
	    		}
	    	}
	    	.menu{
	    		width: calc(100% - 12px);
	    		color: $gray-color;
	    		display: flex;
	    		flex-direction: column;
	    		background: #fff;
	    		border-radius: 20upx;
	    		position: absolute;
	    		top: 76upx;
	    		left: 0;
	    		z-index: 9;
	    		padding: 0 14upx;
	    		box-shadow: 0px 0px 10upx 6upx rgba(0, 0, 0, 0.1);
	    		max-height: 300upx;
	    		overflow-y: scroll;
	    		.item{
	    			font-size: 26upx;
	    			padding: 14upx;
	    		}
	    	}
	    	.menu-down{
	    		animation: timemenumove 0.2s ease 0s 1 normal;
	    	}
	    	@keyframes timemenumove {
	    		0% {height: 0;}
	    		50% {height: 50upx;}
	    		100% {height: 120upx;}
	    	}
	    }
    }
</style>